* {
	margin: 0;
	/* border: 0; */
	padding: 0;
}

:root {
	--boder-radius: 10px;
	--shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}

.main {
	width: 100vw;
	height: 100vh;
	/* background-color: #ffffff; */
	position: relative;

	/* background-image: url('img/bg2.webp'); */
	background-size: 100vw 100vh;
}


.nav {
	/* width: 100px; */
	width: 50px;

	height: 50vh;
	/* height: 800px; */
	/* height: 90vh + 10px; */
	background-color: rgba(240, 240, 240, 0.3);

	position: fixed;
	left: 10px;
	top: 0;
	bottom: 0;
	/* margin 设置了才会有效 */
	margin: auto;

	transition: .5s;

	border-radius: 10px;
	/* box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); */
	box-shadow: var(--shadow);
	z-index: 999;
}


.head-img-box {
	width: 100px;
	height: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
	display: none;
}



.head-img-box>img {
	width: 80px;
	height: 80px;
	border-radius: 40px;
	transform: scale(0.8);
}

.nav-btn {
	width: 100%;

	flex: 1;
	display: flex;
	flex-flow: column;
	align-items: flex-end;
	/* align-content: flex-start; */

}

.nav-btn>div {
	width: 100%;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;


	transform: scale(0.8);
}


.nav-btn>div:hover {
	background-color: rgba(0, 0, 0, 0.1);
	border-radius: 10px;
}

.nav-btn>div>span {
	/* width: 0; */
	height: 20px;
	line-height: 20px;

	display: none;
	visibility: hidden;
	margin-left: 10px;
	font-size: 16px;
	/* border: 1px black solid; */
	/* transition: width 1s; */
	animation-duration: 1s;
	/* animation-name: navspan; */

	/* 文字不换行 */
	white-space: nowrap;
	/* 不被选中文字 */
	-moz-user-select: none;
	-ms-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}

@keyframes navspan {
	from {
		display: none;
	}

	50% {
		display: none;
		transform: scale(0);
		opacity: 0;
	}

	to {
		display: block;
		transform: scale(1);
		opacity: 1;
	}
}


.nav-btn>div>img {
	width: 20px;
	height: 20px;

	display: inline-block;
	user-select: none;
	/* margin-left: 10px; */
}

#setting-btn {
	position: absolute;
	bottom: 0;
}

#setting-menu {
	width: 120px;
	height: 100px;
	padding: 10px;
	background-color: #ffffff;
	overflow: hidden;
	font-size: 20px;
	opacity: 0;
	display: none;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	position: absolute;
	bottom: 0;
	right: -135px;
	transition: opacity 1s;
	/* transition-duration: 1s; */

	border-radius: var(--boder-radius);
	box-shadow: var(--shadow);
}


#setting-menu p {
	width: 100%;
	height: 30px;
	text-align: center;
	line-height: attr(height);

	font-weight: 600;
	/* border-radius: var(--boder-radius); */
	/* box-shadow: var(--shadow); */
}


#setting-menu p:hover {
	background-color: rgba(0, 0, 0, 0.1);
	border-radius: 5px;
}



.status {
	width: 100vw;
	height: 100px;
	background-color: #ffffff;

	display: flex;
	justify-content: space-between;
	align-items: center;


	position: fixed;
	top: 0;
	/* left: 120px; */
	/* border-radius: 0 0 10px 10px; */
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);

	transition: height 0.5s;

	z-index: 30;
}

.status>div {
	/* width: 200px; */
	height: 100%;
	/* background-color: #ffffff; */
}

.status-left {
	width: 200px;
	height: 100%;

	display: flex;
	justify-content: center;
	align-items: center;
}

#logo-img {
	width: 100px;
	height: 100%;


	scale: 0.7;
}

.status-center {
	width: 300px;
	display: flex;
	justify-content: center;
	align-items: center;

	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
}

.status-right {
	width: 500px;
	display: flex;
	justify-content: space-around;
	align-items: center;
}


.status-right img {
	width: 30px;
	height: 30px;

	transition: .3s;
	/* box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); */
}

.status-right img:hover {
	transform: scale(1.1);
}

#search-text {
	width: 250px;
	/* width: 0; */
	visibility: hidden;
	opacity: 0;
	height: 40px;
	line-height: 40px;
	border: 0;
	border-radius: 10px;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);

	transition: .2s;
	margin-right: 10px;
}

#empty {
	width: 50px;
}

/* 设置滚动条宽度 */
body::-webkit-scrollbar {
	width: 1px;
}


/* 设置滚动条宽度 */
.content-box::-webkit-scrollbar {
	width: 0;
}

/* 设置滚动条宽度 */
.collect-box::-webkit-scrollbar,
.preview-box::-webkit-scrollbar {
	display: none;
}
